<template>
  <div class="home-item" v-if="itemData">
    <header>
      <i class="back" @click="back"></i>
      <div class="right">
        <i class="collection" v-if="itemData.pos"></i>
        <div class="text" v-if="itemData.pos">合集 {{ itemData.pos }}/999</div>
        <i class="share"></i>
      </div>
    </header>

    <main>
      <div class="head">
        <div class="left">
          <div class="user-img">
            <img v-if="itemData.blogInfo" :src="itemData.blogInfo.bigAvaImg" />
          </div>
          <div class="text">
            <div class="uesr-name" v-if="itemData.blogInfo">{{ itemData.blogInfo.blogNickName }}</div>
            <div class="time">
              {{ conversionOfTime(itemData.publishTime) }}
              <span v-if="itemData.ipLocation">{{ itemData.ipLocation }}</span>
            </div>
          </div>
        </div>
        <div class="right">+关注</div>
      </div>

      <div class="swp">
        <van-swipe :autoplay="3000" indicator-color="#2e2e2e">
          <van-swipe-item v-for="(image, index) in advertisingData" :key="index">
            <img v-lazy="image.orign" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="text">
        <div v-html="itemData.digest"></div>
      </div>

      <div class="tag">
        <span v-for=" (it, i) in itemData.tagList" :key="i">#{{ it }}</span>
      </div>

      <div class="fun">
        <div class="icon">
          <div class="left">
            <i class="like" v-if="itemData.postCount" :class="[itemData.postCount.viewCount == 1 ? 'selected' : '']"
              @click.stop="switchSelected(itemData!.id, advertisingData![0].orign)"></i>
            <i class="comments"></i>
            <i class="recommend" :class="[share ? 'selected-recommend' : '']" @click="share = !share"></i>
          </div>
          <i class="collection" :class="[collection ? 'selected-collection' : '']"
            @click="switchCollection(itemData!.id, advertisingData![0].orign)"></i>
        </div>
        <div class="hot">
          <div class="post-hot" v-if="itemData.postCount">热度 {{ itemData.postCount.postHot }}</div>
          <div class="count" v-if="itemData.postCount">评论{{ itemData.postCount.responseCount }}</div>
        </div>
      </div>

      <div class="comments">
        <h2>热门评论</h2>

        <div class="on" v-show="!show">
          <i></i>
          <div>来都来了，不说两句嘛~</div>
          <div class="btn">发表评论</div>
        </div>

        <div class="show" v-show="show">
          <ul>
            <li v-for="c in commentsData" :key="c.id">
              <div class="user-img" v-if="c.publisherBlogInfo">
                <img :src="c.publisherBlogInfo.bigAvaImg" />
              </div>
              <div class="text">
                <div class="user-name">{{ c.publisherBlogInfo.blogNickName }}</div>
                <div class="content">{{ c.content }}</div>
                <div class="time">{{ funtime(c.publishTime) }} · {{ c.ipLocation }}</div>
              </div>
              <i></i>
            </li>
          </ul>
        </div>

        <van-cell class="van-cell" is-link @click="showPopup">
          <div class="txt">
            查看全部评论
            <i></i>
          </div>
        </van-cell>

        <van-popup v-model:show="showP" round position="bottom">
          <div class="all-comments">
            <div class="hot-reviews" v-show="hottList!.length">
              <h2>热门评论</h2>
              <ul>
                <li v-for="h in hottList" :key="h.id">
                  <div class="user-img" v-if="h.publisherBlogInfo">
                    <img :src="h.publisherBlogInfo.bigAvaImg" />
                  </div>
                  <div class="text">
                    <div class="user-name">{{ h.publisherBlogInfo.blogNickName }}</div>
                    <div class="content">{{ h.content }}</div>
                    <div class="time">{{ funtime(h.publishTime) }} · {{ h.ipLocation }}</div>
                  </div>
                  <i></i>
                </li>
              </ul>
            </div>

            <div class="reviews" v-show="list!.length">
              <h2>最新评论</h2>
              <ul>
                <li v-for="l in list" :key="l.id">
                  <div class="user-img" v-if="l.publisherBlogInfo">
                    <img :src="l.publisherBlogInfo.bigAvaImg" />
                  </div>
                  <div class="text">
                    <div class="user-name">{{ l.publisherBlogInfo.blogNickName }}</div>
                    <div class="content">{{ l.content }}</div>
                    <div class="time">{{ funtime(l.publishTime) }} · {{ l.ipLocation }}</div>
                  </div>
                  <i></i>
                </li>
              </ul>
            </div>

            <div class="make-comment">
              <form action="/">
                <van-search v-model="value" shape="round" placeholder="评论支持太太" :left-icon="icon" @click="showPopup" />
              </form>

              <div class="send" @click="send" :class="[value ? 'send-data' : '']">发送</div>
            </div>
          </div>
        </van-popup>
      </div>

      <div class="recommended" v-if="(dataArr && dataArr.length > 0)">
        <h2>更多推荐</h2>
      </div>
      <masonry-view :dataArr="dataArr" :switchSelected="switchSelected" />
    </main>

    <footer>
      <form action="/">
        <van-search v-model="value" shape="round" placeholder="评论支持太太" :left-icon="icon" @click="showPopup" />
      </form>

      <div class="icon">
        <div class="left">
          <i class="like" v-if="itemData.postCount" :class="[itemData.postCount.viewCount == 1 ? 'selected' : '']"
            @click.stop="switchSelected(itemData!.id, advertisingData![0].orign)"></i>
          <i class="comments"></i>
          <i class="recommend" :class="[share ? 'selected-recommend' : '']" @click="share = !share"></i>
        </div>
        <i class="collection" :class="[collection ? 'selected-collection' : '']"
          @click="switchCollection(itemData!.id, advertisingData![0].orign)"></i>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { Api } from "@/utils/apis"
import { onMounted, ref, watch } from "vue";
import { usePiniaStore } from "@/stores/index";
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
import icon from "@/assets/images/home/search.png"
import type { DataType, HomeItemDataPostType, HomeItemCommentsType } from "@/typings"
import { funtime_date, conversionOfTime_MD } from "@/utils/numberFormat";

let id = ref<number>()

let value = ref('')
let show = ref(false)
let showP = ref(false)
let share = ref(false)
let collection = ref(false)
let itemData = ref<HomeItemDataPostType>()
let advertisingData = ref([]) as unknown as Array<{ orign: string }>

let dataArr = ref<DataType[]>([])
let list = ref<HomeItemCommentsType[]>()
let hottList = ref<HomeItemCommentsType[]>()
let commentsData = ref<HomeItemCommentsType[]>()

const route = useRoute()
const router = useRouter()

const piniaStore = usePiniaStore()
// const { toggleMyLike } = toRefs(piniaStore)

id.value = route.query.id as unknown as number

// 获取数据
const getHomeItem = async () => {
  let data = await Api.getHomeItem({
    blogdomain: "zheigewangmingbuduobushaozhenghaoshisigezi.lofter.com",
    postid: id.value
  })
  if (data.response) {
    itemData.value = data.response.posts[0].post
    advertisingData = JSON.parse(itemData.value.photoLinks)
  }

  getHomeComments()
  getHomeAllComments()
}

// 获取更多推荐数据
const getRecommended = async () => {
  let data = await Api.getRecommended()
  dataArr.value = data?.data?.list
}

// 获取comments 评论数据
const getHomeComments = async () => {
  let data = await Api.getHomeComments({
    postId: id.value,
    blogId: itemData.value!.blogId
  })

  if (data?.data?.list.length) {
    commentsData.value = data.data.list;
  } else {
    commentsData.value = data?.data?.hotList;
  }

  if (commentsData?.value?.length > 0) {
    show.value = true;
  }
}

//获取comments 全部评论数据
const getHomeAllComments = async () => {
  let data = await Api.getHomeAllComments({
    postId: id.value,
    blogId: itemData.value!.blogId
  })
  list.value = data?.data?.list;
  hottList.value = data?.data?.hotList;
}

//Send数据 发评论
const getHomeSendComments = async () => {
  let data = await Api.getHomeSendComments({
    content: value.value,
    blogId: itemData.value!.blogId,
    postId: id.value,
  })
}

const back = () => {
  router.back();
}

const showPopup = () => {
  showP.value = true;
}

const send = () => {
  getHomeSendComments();

  value.value = "";
  setTimeout(() => {
    getHomeComments();
  }, 500);
}

const conversionOfTime = (time: number) => {
  return conversionOfTime_MD(time);
}

const funtime = (time: number) => {
  return funtime_date(time);
}

const switchSelected = (id: number, src: string) => {
  if (itemData.value!.postCount.viewCount == 1) {
    itemData.value!.postCount.viewCount = 0;
  } else {
    itemData.value!.postCount.viewCount = 1;
  }
  piniaStore.toggleMyLike({ id, src })
};

const switchCollection = (id: number, src: string) => {
  collection.value = !collection.value;
  piniaStore.toggleMyCollection({ id, src })
}

onMounted(() => {
  getHomeItem()
  getRecommended()
})

watch(
  () => route.query,
  (val: any) => {
    id.value = val.id;

    getHomeItem()
    getRecommended()
  },
);

onBeforeRouteLeave((to, from, next) => {
  piniaStore.toggleMyFootsteps({
    id: itemData.value?.id,
    src: advertisingData[0].orign
  })

  next()
})
</script>

<style lang="scss" scoped>
.home-item {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  z-index: 100;
  background-color: rgb(255, 255, 255);

  header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    width: 100vw;
    margin: 0 auto;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(255, 255, 255);

    .back {
      width: 10px;
      height: 10px;
      margin-left: 10px;
      display: block;
      background-image: url("@/assets/images/home/icon_back.png");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
    }

    .right {
      margin-right: 10px;
      display: flex;
      align-items: center;
      font-size: 14px;

      i {
        width: 15px;
        height: 15px;
        margin: 0 10px;
        display: block;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
      }

      .collection {
        background-image: url("@/assets/images/home/2Ee.png");
      }

      .share {
        background-image: url("@/assets/images/home/F_E.png");
        margin-right: 0;
      }
    }
  }

  main {
    width: 94vw;
    margin: 44px auto;

    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        display: flex;
        align-items: center;

        .user-img {
          width: 25px;
          height: 25px;
          border-radius: 999px;

          img {
            width: 25px;
            height: 25px;
            border-radius: 999px;
          }
        }

        .text {
          display: flex;
          flex-flow: column;

          .time {
            font-size: 12px;
            color: #b8b8b8;
          }
        }
      }

      .right {
        color: #49d2cc;
      }
    }

    .swp {
      width: 94vw;
      margin: 10px auto;
      border-radius: 15px;

      img {
        width: 100%;
        border-radius: 15px;
      }

      :v-deep(.van-swipe__track) {
        align-items: center;
        max-height: 490px;
      }

      :v-deep(.van-swipe__indicator) {
        background-color: #a1a1a1;
      }
    }

    .text {
      margin: 10px 0;
    }

    .tag {
      display: flex;
      // flex-flow: row wrap;
      width: 100%;
      overflow-x: scroll;
      white-space: nowrap;

      span {
        font-size: 12px;
        color: #c7c7c7;
        padding: 2px 4px;
        margin: 5px;
        border-radius: 15px;
        background-color: #f5f5f5;
      }
    }

    .fun {
      i {
        width: 20px;
        height: 20px;
        margin: 0 10px;
        display: block;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
      }

      .icon {
        margin: 0 0 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 30vw;

          .like {
            background-image: url("@/assets/images/home/LoX.png");
          }

          .selected {
            background-image: url("@/assets/images/home/5vM.png");
          }

          .comments {
            background-image: url("@/assets/images/home/qOB.png");
          }

          .recommend {
            background-image: url("@/assets/images/home/ht3.png");
          }

          .selected-recommend {
            background-image: url("@/assets/images/home/2FX.png");
          }
        }

        .collection {
          background-image: url("@/assets/images/home/7iH(1).png");
        }

        .selected-collection {
          background-size: 40px 40px;
          background-image: url("@/assets/images/home/4X2.png");
        }
      }

      .hot {
        width: 30vw;
        justify-content: space-around;
        align-items: center;
        display: flex;
        font-size: 12px;
        color: #d4d4d4;
      }
    }

    .comments {
      width: 94vw;
      margin: 10px auto;

      h2 {
        margin: 10px 0;
      }

      .on {
        display: flex;
        flex-flow: column;
        align-items: center;

        i {
          width: 40px;
          height: 40px;
          margin: 0 10px;
          background-image: url("@/assets/images/home/03a.png");
          display: block;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
        }

        div {
          font-size: 12px;
          color: #cecece;
          margin-top: 10px;
        }

        .btn {
          font-size: 16px;
          color: #23d6cd;
          background-color: #caf9f7;
          display: inline-block;
          padding: 7px 10px;
          border-radius: 999px;
        }
      }

      .show,
      .hot-reviews,
      .reviews {
        h2 {
          margin: 20px 10px;
          font-weight: 700;
        }

        ul {
          li {
            width: 94vw;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;

            .user-img {
              width: 10vw;

              img {
                width: 30px;
                height: 30px;
                margin-top: 10px;
                border-radius: 999px;
              }
            }

            .text {
              width: 80vw;

              .user-name {
                color: #949494;
                font-size: 12px;
              }

              .content {
                margin: 10px 0;
                font-size: 12px;
                line-height: 16px;
              }

              .time {
                color: #d4d4d4;
                font-size: 12px;
              }
            }

            i {
              width: 20px;
              height: 20px;
              margin-top: 10px;
              background-image: url("@/assets/images/home/2qP.png");
              display: inline-block;
              background-repeat: no-repeat;
              background-position: center center;
              background-size: contain;
            }
          }
        }
      }

      .van-cell {
        text-align: center;
        flex-direction: column;
        align-items: center;

        i {
          width: 10px;
          height: 10px;
          background-image: url("@/assets/images/home/icon.png");
          display: inline-block;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
        }

        :deep(.van-icon) {
          background-image: none;

          &::before {
            content: "";
          }
        }

        .txt {
          text-align: center;
          width: 35vw;
          padding: 5px 20px;
          display: inline-block;
          font-size: 12px;
          font-weight: 700;
          border-radius: 999px;
          background-color: #ededed;
        }
      }

      :deep(.van-popup--bottom) {
        height: 85vh;

        .make-comment {
          position: fixed;
          bottom: 0;
          left: 0;
          z-index: 100;
          width: 100vw;
          margin: 0 auto;
          height: 44px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: rgb(255, 255, 255);

          .van-search {
            width: 85vw;

            .van-cell {
              flex-direction: row;
            }
          }

          .send {
            color: #d4d4d4;
            font-size: 14px;
            margin-right: 10px;
          }

          .send-data {
            color: #49d2cc;
          }
        }
      }
    }

    .recommended {
      h2 {
        font-weight: 700;
      }
    }
  }

  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 101;
    width: 100vw;
    margin: 0 auto;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(255, 255, 255);

    ::v-deep(.van-search) {
      padding: 5px 12px;
    }

    .icon {
      display: flex;
      justify-content: space-between;
      align-items: center;

      i {
        width: 20px;
        height: 20px;
        margin: 0 10px;
        display: block;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
      }

      .left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 30vw;

        .like {
          background-image: url("@/assets/images/home/LoX.png");
        }

        .selected {
          background-image: url("@/assets/images/home/5vM.png");
        }

        .comments {
          background-image: url("@/assets/images/home/qOB.png");
        }

        .recommend {
          background-image: url("@/assets/images/home/ht3.png");
        }

        .selected-recommend {
          background-image: url("@/assets/images/home/2FX.png");
        }
      }

      .collection {
        background-image: url("@/assets/images/home/7iH(1).png");
      }

      .selected-collection {
        background-size: 40px 40px;
        background-image: url("@/assets/images/home/4X2.png");
      }
    }
  }

  ::v-deep(.van-swipe) {
    max-height: 500px;
  }
}
</style>